<template>
  <div>
    <el-tree
      :data="meausData"
      :props="defaultProps"
      node-key="catId"
      ref="menuTree"
      @node-click="nodeClick"
    >
    </el-tree>
  </div>
</template>

<script>

export default{
    data() {
    return {
      meausData: [],
      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
    }
  },
  methods: {
    // ----------------------------------获取三级分类列表的方法--------------------------------------
    getCategoryList() {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
      }).then(({data}) => {
        // 对象解构赋值
        console.log('获取到了数据:', data.data)
        this.meausData = data.data
      })
    },
    // ---------------------------------点击树节点之后的回调函数---------------------------------------
    nodeClick(data,node,component){
      console.log("子组件Category被点击",data,node,component)
      // 自定义事件，向父组件传递数据
      this.$emit('tree-node-click',data,node,component)
    }
  },
  // -------------------生命周期方法-----------------------------------------------
  created() {
    // 页面进行挂载的时候,获取三级分类的数据
    this.getCategoryList()
  }
}

</script>

<style scoped lang="scss">

</style>
